<template>
  <header>
    <div @click="goBack">
      <i> < </i>
    </div>
    <div>
      <span>{{ title }}</span>
    </div>
    <div>
      <i class="iconfont icon-liaotian"></i>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, defineComponent, defineProps } from 'vue'
const headerVC = defineComponent({
  name: 'Header',
})
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
})
const title = ref(props.title)
const router = useRouter()
const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.173333rem;
  color: #fff;
  background-color: #ff5777;
}

header span {
  font-size: 0.48rem;
}

header i {
  padding: 0 0.4rem;
  font-size: 0.586666rem;
}
</style>
